<template>
    <div class="top-logo">
        <div id="po">
            <img class="logo" src="../assets/logo.png"/>
            <h1>航空订票管理系统后台</h1>
            <div class="input-box">
                <el-input type="text" placeholder="请输入用户名" v-model="user.manAccount"/>
            </div>


            <div class="input-box">
                <el-input type="password" placeholder="请输入密码" v-model="user.manPwd"/>
            </div>


            <div class="input-box">
                <el-button @click="login" type="success" round>登录</el-button>
                <el-button @click="clear" type="primary" round>清空</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data: function () {
            return {
                user: {
                    manAccount: "",
                    manPwd: ""
                }

            }
        },
        methods: {
            clear: function () {
                this.user.manAccount = "";
                this.user.manPwd = "";
            },
            login() {
                axios.post("/manager/login", this.user)
                    .then (response => {
                        var manager=response.data;

                        this.$store.commit("setManager",manager);
                        this.$message({
                            showClose:false,
                            message:"恭喜你登录成功",
                            type:"success",
                        onClose:()=>{
                            this.$router.push("/index");
                        }
                        })
                    })
                    .catch(error=>console.log(error))
                // 箭头函数如果只有一个可以省略小括号
                //如果函数的语句只有一句，可以省略大括号和语句之后的分号
                // if (this.user.manAccount === 'zhangsan' && this.user.manPwd === '1234') {
                //     this.$router.push({path: "/index"});
                //
                // } else {
                //     alert('登陆失败');
                // }
            }

        }

    }
</script>

<style scoped>

    .top-logo .input-box .el-input {
        width: 300px;
        text-align: center;

    }

    .top-logo .input-box .el-button {

        width: 100px;
        margin: 20px;
    }

    .top-logo {
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: url("../assets/plane.jpg");
    }

    #po {
        position: relative;
        top: 100px;
    }


</style>